<template>
  <div class="base-table-box">
    <div class="table-select-group">
      <div class="left">
        <s-select
          :selectOption="proposal.proposalSessionId"
          v-model="params.strYear"
        />
        <proposal-type-select
          style="width: 180px"
          placeholder="=提案类别="
          v-model="params.proposalType"
        />
        <s-select
          style="width: 140px"
          :selectOption="proposal.reporterType"
          placeholder="=提案者类型="
          v-model="params.reporterType"
        />
        <s-select
          style="width: 130px"
          :selectOption="proposal.meeting"
          placeholder="=会中提案="
          v-model="params.meeting"
        />
        <s-select
          style="width: 80px"
          :selectOption="proposal.searchType3"
          v-model="params.type"
        />
        <a-input
          class="search-input"
          v-model="params.search"
          placeholder="请输入搜索内容"
        />
        <a-button style="margin-left: 16px" type="primary" @click="onSearch"
          >查询</a-button
        >
        <a-button @click="reset" class="btn-reset">重置</a-button>
      </div>
    </div>
    <div class="tab-select-group">
      <ul>
        <li
          class="select-type-item"
          v-for="(tab, index) in tabTypes"
          :key="tab.key"
          :class="{ active: currentIndex == index }"
          @click="changeTab(tab, index)"
        >
          <i :class="tab.icon"> </i>
          <span>{{ tab.label }} {{ tab.num }}</span>
        </li>
      </ul>
    </div>
    <div class="blank-div"></div>
    <div class="table-mark">
      <div class="table-mark-left">
        <a-checkbox> 以提案为单位进行统计 </a-checkbox>
        <a-checkbox v-model="checkExpand" @change="expand">
          隐藏子列表内容
        </a-checkbox>
      </div>
      <div class="table-mark-right">
        <span style="color: #ce1221">
          <i class="suncnui suncnui-icon-shijian"></i>
          延期
        </span>
        <span style="color: #ff8a00">
          <i class="suncnui suncnui-icon-shijian"></i>
          3天
        </span>
        <span style="color: #2d93fb">
          <i class="suncnui suncnui-icon-shijian"></i>
          7天
        </span>
        <span style="color: #43a047">
          <i class="suncnui suncnui-icon-shijian"></i>
          15天
        </span>
      </div>
    </div>
    <a-table
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
      :pagination="pagination"
      :columns="columns"
      :data-source="tableData"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%' }"
      :expandIconColumnIndex="9"
      :expandIcon="expandIcon"
      :expandedRowKeys="expandedRowKeys"
    >
      <template slot="status" slot-scope="text, record">
        <i
          class="suncnui suncnui-icon-shijian"
          v-if="!record.children"
          :style="{ color: getColor(record.delay) }"
        ></i>
        <span>{{ text }}</span>
      </template>
      <template slot="action" slot-scope="text, record">
        <a v-if="!record.children">
          <span v-if="record.status == '办理中'" @click="visible = true"
            >提醒办理</span
          >
          <span v-if="record.status == '未签收'" @click="goRecive(record)"
            >提醒签收</span
          >
        </a>
      </template>
    </a-table>
    <s-modal
      class="s-modal"
      :visible="visible"
      title="联名确认"
      :colon="false"
      width="800px"
      :model="form"
      @cancel="visible = false"
      @ok="goHandle"
    >
      <a-form-model-item label="催办对象" required>
        <a-checkbox v-model="form.handleObject" class="checkbox">
          <span>市政府</span>
          <span>承办单位</span>
          <span>1521681149</span>
        </a-checkbox>
      </a-form-model-item>
      <a-form-model-item label="催办方式" required>
        <a-checkbox-group :options="ways" v-model="form.handleWay" />
        <a-textarea
          style="height: 100px; color: #333"
          placeholder="请输入催办内容"
          v-model="form.desc"
        ></a-textarea>
      </a-form-model-item>
    </s-modal>
  </div>
</template>
<script>
import paging from 'mixins/paging'
import deleteItem from 'mixins/delete-table-item.js'
import { proposal } from 'assets/js/select-option-list'
import proposalTypeSelect from 'components/form/proposalTypeSelect'
const columns = [
  {
    title: '案号',
    dataIndex: 'caseNo',
    width: 100,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '题目',
    dataIndex: 'name',
    width: 200,
    ellipsis: true
  },
  {
    title: '提案类别',
    dataIndex: 'proposalType',
    width: 120
  },
  {
    title: '提案者',
    dataIndex: 'proposer',
    width: 130
  },
  {
    title: '办理方式',
    dataIndex: 'handleWay',
    width: 100
  },
  {
    title: '办理单位',
    dataIndex: 'handleUnit',
    width: 140
  },
  {
    title: '应答复日期',
    dataIndex: 'replyDate',
    width: 140
  },
  {
    title: '当前状态',
    dataIndex: 'status',
    width: 140,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 140,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  data() {
    return {
      columns,
      proposal,
      tabTypes: [
        {
          key: '',
          label: '全部',
          num: '',
          icon: 'suncnui suncnui-icon-quanbu'
        },
        {
          key: '1',
          label: '未签收',
          num: 1,
          icon: 'suncnui suncnui-icon-weiqianshou'
        },
        {
          key: '2',
          label: '办理中',
          num: 2,
          icon: 'suncnui suncnui-icon-banlizhong'
        },
        {
          key: '3',
          label: '已办结',
          num: 0,
          icon: 'suncnui suncnui-icon-yibanjie'
        },
        {
          key: '4',
          label: '申请延期',
          num: 0,
          icon: 'suncnui suncnui-icon-shijian'
        },
        { key: '5', label: '退回', num: 0, icon: 'suncnui suncnui-icon-tuihui' }
      ],
      count: 0,
      currentIndex: 0,
      params: {
        strYear: '0',
        search: '',
        type: '',
        proposalType: undefined,
        reporterType: undefined,
        meeting: undefined
      },
      ways: [
        { label: '系统消息', value: '1' },
        { label: '短信', value: '2' }
      ],
      expandedRowKeys: [],
      checkExpand: true,
      visible: false,
      form: {
        handleObject: undefined,
        handleWay: ['1'],
        desc:
          '您所在单位(市政府)承办的提案“关于印发冬春季农村地区新冠肺炎疫情防控工作方案的通知1111”，距离结束办理时间还有“84”天，请尽快办理！'
      }
    }
  },
  mixins: [paging, deleteItem],
  components: { proposalTypeSelect },
  methods: {
    onSearch() {
      console.log(this.form)
      // this.loading = true
      // // ajax request after empty completing
      // setTimeout(() => {
      //   this.loading = false
      //   this.selectedRowKeys = []
      // }, 1000)
    },
    reset() {
      this.form = {}
    },
    //状态tab筛选
    changeTab(tab, index) {
      this.currentIndex = index
      this.params.auditStatus = tab.key
      this.getTableData(this.params) //传入当前选择的tab
    },
    getTableData() {
      for (let i = 0; i < this.pagination.pageSize; i++) {
        this.tableData.push({
          key: i,
          name: `Edward King ${i}`,
          proposer: '王卫东',
          handleWay: '承办系统',
          handleUnit: '市政府',
          replyDate: '',
          status: '办理中',
          children: [
            {
              key: `id${i}`,
              name: `Edward King 111${i}`,
              proposer: '王卫东',
              handleWay: '主办',
              handleUnit: '市教育局',
              replyDate: '2021-06-08',
              status: '办理中',
              delay: i
            }
          ]
        })
      }
      this.pagination.total = 200
    },
    //提醒办理弹窗
    goHandle(record) {},
    //提醒签收
    goRecive() {
      this.$confirm({
        title: '确定需要提醒承办单位签收？',
        onOk() {
          //请求删除接口
        },
        onCancel() {}
      })
    },
    //自定义展开样式
    expandIcon(props) {
      if (props.record.children) {
        if (props.expanded) {
          return (
            <span
              style="margin-right:10px;color: #1c8de8;cursor:pointer"
              onClick={(e) => {
                this.onExpand(props.expanded, props.record, e)
              }}
            >
              收起
              <a-icon type="caret-up" />
            </span>
          )
        } else {
          return (
            <span
              style="margin-right:10px;color: #1c8de8;cursor:pointer"
              onClick={(e) => {
                this.onExpand(props.expanded, props.record, e)
              }}
            >
              展开
              <a-icon type="caret-down" />
            </span>
          )
        }
      }
    },
    //隐藏显示子项复选框改变事件
    expand() {
      if (this.checkExpand) {
        this.expandedRowKeys = []
      } else {
        this.tableData.forEach((i, index) => {
          this.expandedRowKeys.push(index)
        })
      }
    },
    //展开收起事件
    onExpand(expanded, record, e) {
      if (expanded) {
        this.expandedRowKeys.remove(record.key)
      } else {
        this.expandedRowKeys.push(record.key)
      }
    },
    getColor(delay) {
      if (delay < 0) {
        return '#ce1221'
      } else if (delay < 3 || delay == 3) {
        return '#ff8a00'
      } else if (delay < 7 || delay == 7) {
        return '#2d93fb'
      } else {
        return '#43a047'
      } 
    }
  }
}
</script>
<style lang="less" scoped>
.tab-select-group {
  margin-top: 10px;
  line-height: 40px;
  padding: 0px 10px 5px 15px;
  ul li {
    float: left;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 15px;
    color: #666666;
    cursor: pointer;
    border-radius: 2px;
    margin-right: 25px;
    i {
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
      margin-left: 5px;
    }
  }
  .active {
    background-color: #e6f2f9;
    color: #097bc7;
  }
}
.blank-div {
  width: 100%;
  height: 20px;
  background: #f5f6fa;
}
.table-mark {
  .flex-space-between();
  padding: 20px 25px;
  line-height: 20px;
}
/deep/ .ant-table-row-level-1 {
  background: #eee;
}
.suncnui-icon-shijian {
  vertical-align: middle;
  margin-right: 5px;
}
/deep/.modal-form .ant-form-item {
  height: auto;
}
/deep/.modal-form {
  min-height: 400px;
}
.checkbox {
  span {
    margin-right: 10px;
  }
}
.table-mark-right {
  font-size: 14px;
  span {
    margin-left: 20px;
    vertical-align: middle;
  }
}
</style>